import Vue from 'vue'
import axios from 'axios'

// 导入路由
import router from '../router/index'

import { Message } from 'element-ui'

// 第三方插件，第三方的转换模式
import JSONBigint from 'json-bigint'

const instance = axios.create({
  // 基地址
  baseURL: 'http://api-toutiao-web.itheima.net',
  // 设置超时 事件
  timeout: 5000,
  // 转换响应数据格式，把原有的 axios 转换覆盖掉
  transformResponse: [data => {
    try {
      const jsonObject = JSONBigint.parse(data)

      return jsonObject
    } catch (e) {
      // 有异常 返回原始的数据
      return data
    }
  }]
})

// 请求拦截器，所有的请求 发出去之后都会经过 请求拦截且才能到达服务器
instance.interceptors.request.use(config => {
  // 获取本地存储的 token
  const token = window.localStorage.getItem('token')
  if (token) {
    // 在请求头中携带 token
    config.headers.Authorization = token
  }

  // 必须 return 出去，这个请求才会发送给后端，否则发不过去
  return config
})

// 响应拦截器
instance.interceptors.response.use(resp => {
  // 对响应数据做点什么
  // console.log(res.resp);
  return resp
}, err => {
  // 响应错误做点什么
  console.dir(err)
  if (err.response.status === 401) {
    // 删除token
    window.localStorage.removeItem('token')
    // 这里不能通过 this.$router.push('/login') 跳转，
    // 因为是通过Vue实例调用router对象的push进行跳转，这里的this不是vue实例

    // 可以通过导入router 可以拿到router实例，进行控制跳转
    // 跳转到登录页
    router.push('/login')
    // 错误提示
    Message.error('登录失效！')
  }
  return Promise.reject(err)
})

// 挂在到vue原型上
Vue.prototype.$axios = instance
